<template>
  <div class="search">
    <div class="search-wrapper">
      <search-box ref="searchBox" @query="onQueryChange"></search-box>
    </div>
    <!--搜索热词-->
    <div class="shortcut-wrapper" v-show="!query">
      <div class="shortcut">
        <div class="hot-key">
          <h1 class="title">热门搜索</h1>
          <ul>
            <li @click="setQuery(item)"
                class="item"
                v-for="(item,index) in hotKey"
                :key="index">{{item.k}}
            </li>
          </ul>
        </div>
        <!--    搜索历史-->
        <div class="history-wrapper" v-show="searchHistory().length">
          <h1 class="title">
            <span class="text">搜索历史</span>
            <span class="clear" @click="showConfirm">
              <i class="icon-clear"></i>
            </span>
          </h1>
          <search-list
            :searches="searchHistory()"
            @addQuery="setQuery"
            @deleteOne="deleteHistory"
          ></search-list>
        </div>
      </div>
    </div>
    <!--    搜索结果列表-->
    <div class="suggest-wrapper" v-show="query">
      <suggest :query="query" @saveHistory="saveSearchHistory"></suggest>
    </div>
    <!--    确认弹窗-->
    <confirm ref="confirm"
             :title="title"
             :btn-cancle="btnCancle"
             :btn-sure="btnSure"
             @sureClear="clearAll"
    ></confirm>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  import SearchBox from 'base/search-box/search-box'
  import Confirm from 'base/confirm/confirm'
  import {getHotKey} from 'api/search'
  import {mapActions, mapGetters} from 'vuex'
  import Suggest from 'base/suggest/suggest'
  import SearchList from 'base/search-list/search-list'

  export default {
    data () {
      return {
        // 推荐搜索热词
        hotKey: [],
        // 输入框的内容
        query: '',
        // 弹窗标题
        title: '是否清空搜索历史',
        // 弹窗取消
        btnCancle: '取消',
        // 弹窗确认
        btnSure: '确认'

      }
    },
    created () {
      this._getHotKey()
    },
    methods: {
      // show弹出框
      showConfirm () {
        this.$refs.confirm.show()
      },
      // 清空搜索历史
      clearAll () {
        this.clearAll()
      },
      // 保存搜索历史
      saveSearchHistory () {
        this.saveHistory(this.query)
      },
      // 监听搜索框的输入情况，将query传给结果列表，
      // 让结果列表去查询
      onQueryChange (query) {
        this.query = query
      },
      // 点击搜索词就会填入搜索框
      setQuery (item) {
        this.$refs.searchBox.setQuery(item.k)
        if (!item.k) {
          this.$refs.searchBox.setQuery(item)
        }
      },
      _getHotKey () {
        getHotKey().then(res => {
          this.hotKey = res.hotkey.slice(0, 10)
        })
      },
      ...mapActions([
        'saveHistory',
        'deleteHistory',
        'clearAll'
      ]),
      ...mapGetters([
        'searchHistory'
      ])
    },
    components: {
      SearchBox,
      Suggest,
      SearchList,
      Confirm
    }
  }
</script>

<style scoped lang="stylus">
  @import "~common/stylus/variable.styl"
  .search-wrapper
    margin: 20px

  .shortcut-wrapper
    position: fixed
    width: 100%
    top: 178px
    bottom: 0

    .shortcut
      height: 100%
      overflow: hidden

      .hot-key
        margin: 0 20px 20px 20px

        .title
          margin-bottom: 20px
          font-size: $font-size-medium
          color: $color-text-l

        .item
          display: inline-block
          padding: 5px 10px
          margin: 0 20px 10px 0
          border-radius: 6px
          background: $color-highlight-background
          font-size: $font-size-medium
          color: $color-text-d

      .history-wrapper
        position: relative
        margin: 0 20px

        .title
          display: flex
          height: 40px
          align-items: center
          font-size: $font-size-medium
          color: $color-text-l

          .clear
            extent-click()

          .text
            flex: 1

          .icon-delete
            color: $color-text-d

  .suggest-wrapper
    position: fixed
    width: 100%
    top: 178px
    bottom: 0
</style>
